<template>
  <view class="goodList">
    <block v-for="(item, index) in bastList" :key="index">
      <view
        @click="goDetail(item)"
        class="item row-between-wrapper"
        hover-class="none"
      >
        <view class="left_">
          <image :src="httpUrlFn(item)"></image>
        </view>
        <view class="right_">
          <view class="item_1">
            {{ item.prodName }}
          </view>
          <view class="item_2">
            <view
              >佣金：<text>￥{{ item.CommissionToggle }}</text>
            </view>
          </view>
          <view class="item_3">
            <view class="money_"
              >￥
              <text>{{ item.price }}</text>
            </view>
            <view class="money_price">￥{{ item.oriPrice }}</view>
            <view class="number_"
              >已售
              <text>{{ item.vrPayUsers }}</text>
            </view>
          </view>
        </view>
        <!--        <view-->
        <!--          class="iconfont icon-gouwuche cart-color acea-row row-center-wrapper"-->
        <!--        ></view>-->
      </view>
    </block>
  </view>
</template>

<script>
import { goShopDetail } from "@/libs/order.js";
import { BASE_URL_IMAHE } from "../../../utils/https";
export default {
  props: {
    status: {
      type: Number,
      default: 0,
    },
    bastList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    httpUrlFn(item) {
      return BASE_URL_IMAHE + item.pic;
    },
    goDetail(item) {
      console.log(item, "item");
      uni.navigateTo({
        url: `/pages/subpackage/goods/detail?prodId=${item.prodId}&pic=${
          item.pic
        }&prodName=${item.prodName}&price=${item.price}&oriPrice=${
          item.oriPrice
        }&vrPayUsers=${item.vrPayUsers}&commission=${
          item.commission
        }&properties=${item.properties}&content=${encodeURIComponent(
          JSON.stringify(item.content)
        )}&channelId=1&itemType=1`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.goodList {
  padding: rpx(12);
}
.goodList .item {
  margin-bottom: rpx(12);
  display: flex;
  justify-content: space-between;
}

.goodList .item .pictrue {
  width: rpx(90);
  height: rpx(90);
  position: relative;
  margin-right: rpx(6);
  border-radius: rpx(6);
  overflow: hidden;
}

.goodList .item .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
  vertical-align: middle;
}

.goodList .item .pictrue .numPic {
  position: absolute;
  left: 7rpx;
  top: 7rpx;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
}

.goodList .item .underline {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  width: rpx(90);
  height: rpx(90);
}

.goodList .item:nth-last-child(1) .underline {
  border-bottom: 0;
}

.goodList .item .text {
  font-size: 30rpx;
  color: #222;
  width: 489rpx;
}

.goodList .item .text .money {
  font-size: 26rpx;
  font-weight: bold;
  margin-top: 50rpx;
}

.goodList .item .text .money .num {
  font-size: 34rpx;
}

.goodList .item .text .vip-money {
  font-size: 24rpx;
  color: #282828;
  font-weight: bold;
  margin-top: 15rpx;
}

.goodList .item .text .vip-money image {
  width: 46rpx;
  height: 21rpx;
  margin: 0 22rpx 0 5rpx;
}

.goodList .item .text .vip-money .num {
  font-size: 22rpx;
  color: #aaa;
  font-weight: normal;
  margin: -2rpx 0 0 0;
}

.goodList .item .iconfont {
  position: absolute;
  right: 30rpx;
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  font-size: 30rpx;
  bottom: 38rpx;
}

.left_ {
  margin-right: rpx(6);

  > image {
    width: rpx(72);
    height: rpx(72);
    vertical-align: middle;
  }
}
.right_ {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;

  > .item_1 {
    margin-bottom: rpx(6);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /*最大行数*/
  }

  > .item_2 {
    display: flex;
    margin-bottom: rpx(11);

    > view {
      font-size: rpx(10);
      font-weight: 400;
      color: #fa5151;
      background: rgba(250, 81, 81, 0.1);
      border-radius: rpx(2);
      border: rpx(1) solid #fa5151;
      padding: rpx(1) rpx(3);
    }
  }

  > .item_3 {
    display: flex;
    align-items: center;
    justify-content: space-between;

    > .money_ {
      font-size: rpx(10);
      font-weight: bold;
      color: #fa5151;
      margin-right: rpx(4);

      > text {
        font-size: rpx(15);
      }
    }

    > .money_price {
      margin-top: rpx(2);
      font-size: rpx(10);
      font-weight: 400;
      color: #b2b2b2;
      text-decoration: line-through;
    }

    > .number_ {
      margin-left: auto;
      font-size: rpx(12);
      font-weight: 400;
      color: #888888;
    }
  }
}
</style>
